<template>
  <div style="padding: 10px 30px">
    <el-select
      v-model.trim="queryForm.grade"
      filterable
      :placeholder="'请选择年级'"
      style="width: 168px; padding: 0 10px"
      @change="selectData"
    >
      <el-option v-for="(item, index) in grades" :key="index" :label="item.name" :value="item.name" />
    </el-select>
    <el-select
      v-model.trim="queryForm.class"
      filterable
      :placeholder="'请选择班级'"
      style="width: 168px; padding: 0 10px"
      @change="selectData"
    >
      <el-option v-for="(item, index) in 50" :key="index" :label="item.name" :value="index + 1 + '班'" />
    </el-select>

    <el-select
      v-if="queryForm.grade && queryForm.class"
      v-model.trim="queryForm.name"
      clearable
      filterable
      :placeholder="'快速搜索学生'"
      style="width: 168px; padding: 0 10px"
    >
      <el-option v-for="(item, index) in students" :key="index" :label="item.name" :value="item.name" />
    </el-select>

    <!-- <el-button :disabled="isLoading" :icon="Search" native-type="submit" type="primary" @click="selectData">查询</el-button> -->
    <el-button v-if="isclient" :disabled="isLoading" :icon="Search" native-type="submit" type="warning" @click="read_this_card">
      读卡测试
    </el-button>
    <el-button v-if="isclient" :disabled="isLoading" :icon="Search" native-type="submit" type="success" @click="read_this_card_select">
      读卡并查询
    </el-button>
    <el-button v-if="isclient" :disabled="isLoading" :icon="Search" native-type="submit" type="primary" @click="selectData">
      查询全部
    </el-button>
  </div>
  <el-row class="data-screen-bottom">
    <el-col v-for="(item, i) in students" :span="2">
      <el-row>
        <el-col>
          <el-image class="data-screen-bottom-icon" :src="bottom_01" style="width: 60px; height: 60px" @click="ChooseStudent(item.id)" />
          <h3 style="text-align: center" @click="ChooseStudent(item.id)">{{ item.name }}</h3>
        </el-col>
      </el-row>
    </el-col>
  </el-row>

  <el-dialog
    v-if="currentStudent.id"
    v-model="currentStudent"
    align-center
    :title="currentStudent.name + '[' + currentStudent.basic_sex_T_sex.name + ']'"
    width="500"
  >
    <div>学籍号：{{ currentStudent.student_code }}</div>
    <div>班级：{{ currentStudent.sport_grade_name }}{{ currentStudent.sport_jk_class_name }}</div>
    <div v-if="currentStudent.score > 0">分数：{{ currentStudent.score }}</div>
    <div v-if="currentStudent.height > 0">身高：{{ currentStudent.height }}</div>
    <div v-if="currentStudent.weight > 0">体重：{{ currentStudent.weight }}</div>
    <div v-if="currentStudent.bmi > 0">体重指数：{{ currentStudent.bmi }}</div>
    <div v-if="currentStudent.lung_capacity > 0">肺活量：{{ currentStudent.lung_capacity }}</div>
    <div v-if="currentStudent.run_50 > 0">50米跑： {{ currentStudent.run_50 }}</div>
    <div v-if="currentStudent.sit_and_reach > 0">坐位体前屈： {{ currentStudent.sit_and_reach }}</div>
    <div v-if="currentStudent.jump_rope > 0">1分钟跳绳： {{ currentStudent.jump_rope }}</div>
    <div v-if="currentStudent.sit_ups > 0">1分钟仰卧起坐： {{ currentStudent.sit_ups }}</div>
    <div v-if="currentStudent.pull_ups > 0">引体向上(男)： {{ currentStudent.pull_ups }}</div>
    <div v-if="currentStudent.sit_ups_female > 0">1分钟仰卧起坐(女)： {{ currentStudent.sit_ups_female }}</div>
    <div v-if="currentStudent.jump_long > 0">立定跳远： {{ currentStudent.jump_long }}</div>
    <div v-if="currentStudent.run_50_8">50米×8往返跑： {{ currentStudent.run_50_8 }}</div>
    <div v-if="currentStudent.run_1000">1000米跑(男)： {{ currentStudent.run_1000 }}</div>
    <div v-if="currentStudent.run_800">800米跑(女)：{{ currentStudent.run_800 }}</div>

    <div>考试记录：</div>
    <div v-for="(log, index) in currentStudent.exam_log" :key="index">
      {{ log.project_name }} - 成绩：{{ log.achievement }} - 分数：{{ log.score }} - ({{ log.createtime }})
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="currentStudent = false">取消</el-button>
        <el-button v-if="isclient" type="primary" @click="write_this_card(currentStudent)">写卡</el-button>
        <el-button v-if="isclient" type="warning" @click="read_this_card()">读卡测试</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { random } from 'lodash-es'
import bottom_01 from '/@/assets/data_screen_images/bottom_02_gray.png'

import { api_getGrades, api_getStudentDetail, api_getStudents } from '/@/api/jkDataScreen'
import { api_detail } from '/@/api/obj'
import { is_client, read_card, write_card } from '/@/api/scanCard'

defineOptions({
  name: 'DataScreenBottom',
})

const props = defineProps({
  exam_id: {
    type: Number,
    default: 0,
  },
})

const isclient = ref<boolean>(false) //当前是否是客户端

const queryForm = ref({
  grade: '',
  class: '',
  exam_id: 0,
  name: '',
  id: 0, //student_id
  bracelet_number: '', //手环号
})

//弹框
const currentStudent = ref({
  idcard: '',
})

//年级
const grades = ref([])
//学生
const students = ref([])

const countConfig1 = reactive({
  startValue: 0,
  endValue: random(1000, 2000),
})

const countConfig2 = reactive({
  startValue: 0,
  endValue: random(1000, 2000),
})

const countConfig3 = reactive({
  startValue: 0,
  endValue: random(1000, 2000),
})

const countConfig4 = reactive({
  startValue: 0,
  endValue: random(1000, 2000),
})

useIntervalFn(() => {
  countConfig1.endValue = countConfig1.endValue + random(0, 100)
  countConfig2.endValue = countConfig2.endValue + random(0, 100)
  countConfig3.endValue = countConfig3.endValue + random(0, 100)
  countConfig4.endValue = countConfig4.endValue + random(0, 100)
}, 1000 * 5)

//写卡
const write_this_card = (row: any) => {
  console.log(row.bracelet_number)
  const tnum = write_card(row.bracelet_number)
  // console.log(tnum)
}

//读卡
const $baseMessage = inject<any>('$baseMessage')
const read_this_card = async () => {
  const { bracelet_number }: any = await read_card()
  console.log(bracelet_number)
  //根据手环号到系统中查询学生信息

  const { detail }: any = await api_detail('sport_jk_student', { bracelet_number: bracelet_number })

  if (currentStudent.value.idcard) {
    //表示有当前用户
    if (currentStudent.value.idcard != detail.idcard) {
      $baseMessage(`${detail.name} ${detail.idcard}`, 'error', 'hey')
      return false
    }
  }

  $baseMessage(`${detail.name} ${detail.idcard}`, 'success', 'hey')
  // $baseMessage(name, 'success', 'hey')
}

//读卡并查询
const read_this_card_select = async () => {
  const { bracelet_number }: any = await read_card()
  console.log(bracelet_number)
  //根据手环号到系统中查询学生信息
  queryForm.value.bracelet_number = bracelet_number
  const res = await api_getStudents(queryForm.value)
  students.value = res.data
  queryForm.value.bracelet_number = ''

  // $baseMessage(name, 'success', 'hey')
}

//查看数据
const ChooseStudent = async (id: any) => {
  queryForm.value.id = id
  const res = await api_getStudentDetail(queryForm.value)
  currentStudent.value = res.data
}

//查看数据
const selectData = async () => {
  //根据年级id，班级id，搜索对应的students
  console.log('根据年级id，班级id，搜索对应的students')
  console.log(queryForm.value.grade)
  console.log(queryForm.value.class)
  queryForm.value.exam_id = props.exam_id

  if (!queryForm.value.grade && !queryForm.value.class) {
    // $baseMessage('请选择年级和班级', 'error', 'hey')
    return false
  }
  if (!queryForm.value.grade) {
    // $baseMessage('请选择年级', 'error', 'hey')
    return false
  }
  if (!queryForm.value.class) {
    // $baseMessage('请选择班级', 'error', 'hey')
    return false
  }

  const res = await api_getStudents(queryForm.value)
  students.value = res.data
  if (students.value.length == 0 && queryForm.value.grade && queryForm.value.class) {
    $baseMessage('该班级暂无学生报名', 'error', 'hey')
  }
  // grades.value = res.data
}

onMounted(async () => {
  console.log(`left exam_id${props.exam_id}`)
  //根据exam_id获取有多少个年级
  const data = {
    exam_id: props.exam_id,
  }
  const res = await api_getGrades(data)

  grades.value = res.data
  isclient.value = is_client()
})
</script>

<style lang="scss" scoped>
.data-screen-bottom {
  display: flex;
  align-items: left;
  justify-content: left;
  height: 100%;

  &-icon {
    display: block;
    width: 140px;
    height: 140px;
    padding: 20px;
    margin: 8px auto 0 auto;
    background: #101f58;
    border-radius: 50%;
    animation: twink 3s linear infinite;
  }

  &-text {
    margin-top: 10px;
    font-size: 30px;
    color: #64c5d9;
    text-align: left;

    p {
      font-size: 14px;
      color: #fff;
    }
  }
}
</style>
